<template>
	<view class="main">
		
		<u-navbar title="解锁次数" :autoBack="true" :placeholder="true" :titleStyle="state.titleStyle" :height="40"
			bgColor="#F5F5F5">
		</u-navbar>
		<view class="cishu">
			剩余解锁次数：<text>{{state.userInfo.num_ci}}</text>
		</view>
		<view class="listCi">
			<view :class="val.id==state.ciId?'cioneMo':'ciones'" v-for="(val,index) in state.listCi" :key='index' @click="getQie(val.id,val.amount)">
				<view class="ci">
					解锁{{val.num}}次
				</view>
				<view class="jia">
					<text>￥</text>{{val.amount}}
				</view>
			</view>
		</view>
		<view class="butLi" @click="state.juShow=true">
		    立即支付
		</view>
		<view class="li">
			购买记录
		</view>
		<view class="center" v-for="(val,index) in state.balanceList" :key='index'>
			<view class="ding">
				<text>订单号：</text>
				<text class="right">{{val.id}}</text>
			</view>
			<view class="ding">
				<text>购买类型：</text>
				<text class="right">{{val.supplement}}</text>
			</view>
			<view class="ding">
				<text>订单金额：</text>
				<text class="right">￥{{val.amount}}</text>
			</view>
			<view class="ding">
				<text>支付时间：</text>
				<text class="right">{{val.createtime}}</text>
			</view>
		</view>
		<!-- 支付-->
		<view class="tan" v-if="state.juShow">
			<view class="bgcen">
				<view class="times">
					购买解锁次数           
				</view>
				<view class="cha" @click="state.juShow=false">
					<image src="../../static/icon.png" mode="" ></image>
				</view>
				<view class="qian">
					<text>￥</text>{{state.ciJg}}
				</view>
				<view class="buc">
					付款说明：
				</view>
				<view class="xuan">
					<view class="ones" v-for="(val,index) in state.juList" :key='index' @click="getXuan(val.id)">
						<view class="lezhi">
							<image :src="val.img" mode=""></image>{{val.name}}
						</view>
						<view class="dui">
							<image src="../../static/login_icon_select2@2x.png" mode="" v-if="val.id==state.juid"></image>
							<image src="../../static/icon_select@2x.png" mode="" v-else></image>
						</view>
					</view>
				</view>
				
				<view class="juBao" @click="isZf()">
					确认支付
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		ref,
		reactive,
	} from 'vue';
	import sheep from '@/sheep';
	import {
		onLoad,
	} from '@dcloudio/uni-app';
	const state = reactive({
		titleStyle: 'fontWeight:bold',
		listCi:[],
		ciId:1,
		ciJg:0,
		juList:[
			{
				id:1,
				name:'微信支付',
				img:'../../static/pay_icon_wei@2x.png'
			},
			{
				id:2,
				name:'支付宝支付',
				img:'../../static/pay_icon_zhi@2x.png'
			}
		],
		juid:1,
		juShow:false,
		balanceList:[],
		userInfo:{},
	});
	onLoad((options) => {
		getpackage()//消费次数列表
		getbalance()//购买记录
		getuserInfo()
	});
	// 个人信息
	async function getuserInfo() {
		const {code,data} = await sheep.$api.user.userInfo({
			token:uni.getStorageSync('token'),
		})
		if (code == 1) {
		   state.userInfo=data
		}
	}
	// 购买记录
	async function getbalance() {
		const {code,data} = await sheep.$api.user.balance({
			token:uni.getStorageSync('token'),
			type:'1',
			account:'num_ci',
			page:state.page,
			limit:state.limit,
		})
		if (code == 1) {
		   state.balanceList=data.list
		}
	}
	// 次数套餐列表
	async function getpackage() {
		const {code,data} = await sheep.$api.user.package({
			token:uni.getStorageSync('token'),
			type:1,
		})
		if (code == 1) {
		   state.listCi=data.list
		   if(data.list.length>0){
			   console.log()
			   state.ciId = data.list[0].id
			   state.ciJg = data.list[0].amount
		   }
		}
	}
	async function isZf(){
		let pay_type = ''
		let method =''
		let codes=''
		let port = uni.getSystemInfoSync().uniPlatform 
		console.log(port)
		if(port=='windows'||port=='web'){
			method = 'wab'
		}
		if(port=='devtools'){
			method = 'miniapp'
		}
		if(port=='mp-weixin'){
			method = 'miniapp'
		}
		if(port=='app'||port=='android'||port=='ios'){
			method = 'app'
		}
		if(state.juid='1'){
			pay_type = 'wechat'
		}else{
			pay_type = 'alipay'
		}
		console.log('codescodescodescodes’')
		if(port=='devtools'||port=='mp-weixin'){
			console.log('codescodescodescodes’')
			// 微信小程序支付
			uni.login({
				"provider": "weixin",
				"onlyAuthorize": true, // 微信登录仅请求授权认证
				success: function(event){
					codes = event.code
					console.log(event.code,'codes’')
					getWei(pay_type,method,codes)
				},
				fail: function (err) {
			        // 登录授权失败  
			        // err.code是错误码
			    }
			})
			
		}else{
			const {code,data} = await sheep.$api.zqzApi.addOrder({
				token:uni.getStorageSync('token'),
				package_id:state.ciId,
				pay_type:pay_type,
				method:method
			})
			if (code == 1) {
			   
			}
		}
	}
	//微信小程序支付
	async function getWei(pay_type,method,codes){
		const {code,data} = await sheep.$api.zqzApi.addOrder({
			token:uni.getStorageSync('token'),
			package_id:state.ciId,
			pay_type:pay_type,
			method:method,
			code:codes
		})
		if (code == 1) {
			let orderInfo=data
		   uni.requestPayment({
		       provider: 'wxpay',    //支付类型-固定值
		       timeStamp:orderInfo.timeStamp, // 时间戳（单位：秒）
		       nonceStr: orderInfo.nonceStr, // 随机字符串
		       package: orderInfo.package, // 固定值
		       signType:orderInfo.signType, //固定值
		       paySign:orderInfo.paySign, //签名
		       success: function (res) {
		           console.log('success:' + JSON.stringify(res));
		           console.log("支付成功");
		       },
		       fail: function (err) {
		           console.log('fail:' + JSON.stringify(err));
		           console.log("支付失败");
		       }
		   });
		}
	}
	function getLeft(){
		uni.navigateBack({
			delta:1,//返回层数，2则上上页
		})
	}
	function getQie(id,jg) {
		state.ciId = id
		state.ciJg = jg
	}
	function getXuan(e){
		state.juid = e
	}
</script>

<style lang="scss">
	.tan{
		width:100%;
		height:100vh;
		position: fixed;
	    top:0;
		left:0;
		background: rgba(0,0,0,0.4);
		.bgcen{
			width: 100%;
			height: 700rpx;
			background: #fff;
			position:absolute;
			bottom:0;
			border-radius: 16rpx 16rpx 0 0;
			// position: relative;
			.qian{
				width: 100%;
				margin: 50rpx auto;
				text-align: center;
				font-size:48rpx;
				font-family: PingFang SC-Bold, PingFang SC;
				font-weight: bold;
				color: #333333;
				text{
					font-size: 28rpx;
					font-family: PingFang SC-Bold, PingFang SC;
					font-weight: bold;
					color: #333333;
				}
			}
			.xuan{
				width:calc(100% - 64rpx);
				margin: 20rpx auto;
				overflow:hidden;
			    
				.ones{
					width: 100%;
					line-height:80rpx;
					text-align:center;
					border-radius: 12rpx;
					margin: 20rpx 0;
					display:flex;
					align-items: center;
					justify-content:space-between;
					.lezhi{
						display:flex;
						align-items: center;
						image{
							 width: 48rpx;
							 height:48rpx;
							 margin-right:10rpx;
						}
					 }
					image{
						 width: 48rpx;
						 height:48rpx;
					}
				}
				.onesmo{
					width: 100%;
					line-height:80rpx;
					text-align:center;
					border-radius: 12rpx;
					margin: 20rpx 0;
				}
			}
			.buc{
				width:calc(100% - 64rpx);
				margin: 20rpx auto;
				font-size: 28rpx;
				color: #999999;
			}
			
			.juBao{
				width:calc(100% - 64rpx);
				margin:50rpx auto;
				background: #1BDDD0;
				color:#fff;
				border-radius: 54rpx;
				line-height: 92rpx;
				text-align: center;
			}
			.times{
				text-align: center;
				width: 100%;
				line-height: 80rpx;
				font-weight: bold;
				border-bottom: 1px solid #EFEFEF;
			}
			.cha{
				position: absolute;
				top:20rpx;
				right:20rpx;
				image{
					width: 40rpx;
					height:40rpx;
				}
			}
		}
	}
   page {
   	height: 100%;
   	width: 100%;
   	background-color: #F5F5F5;
		.main {
			height: 100%;
			width: 100%;
			background-color: #F5F5F5;
			.center{
				width: calc(100% - 96rpx);
				margin: 20rpx auto;
				overflow: hidden;
				background: #fff;
				padding:24rpx;
				border-radius:24rpx;
				.ding{
					display: flex;
					align-items: center;
					justify-content: space-between;
					font-size:28rpx;
					font-family: PingFang SC-Medium, PingFang SC;
					font-weight: 500;
					color: #666666;
					line-height: 50rpx;
					.right{
						font-size:28rpx;
						font-family: PingFang SC-Medium, PingFang SC;
						font-weight: 500;
						color: #333333;
					}
				}
			}
			.li{
				width: calc(100% - 64rpx);
				margin: 24rpx auto;
				font-size: 32rpx;
				font-family: PingFang SC-Bold, PingFang SC;
				font-weight: bold;
				color: #333333;
			}
			.cishu{
				width: 100%;
				background: rgba(27, 221, 208, 0.05);
				color: #333;
				padding:24rpx;
				font-size:24rpx;
				font-family: PingFang SC-Medium, PingFang SC;
				font-weight: 500;
				display: flex;
				align-items: center;
				// flex-wrap: wrap;
				// justify-content: space-between;
				text{
					font-size: 40rpx;
					font-family: PingFang SC-Bold, PingFang SC;
					font-weight: bold;
					color: #1BDDD0;
				}
			}
			.listCi{
				width: calc(100% - 64rpx);
				margin: 20rpx auto;
				display: flex;
				align-items: center;
				flex-wrap: wrap;
				justify-content: space-between;
				.ciones{
					width: 42%;
					padding:24rpx;
					background: #fff;
					border-radius: 24rpx;
					margin-bottom: 20rpx;
					.ci{
						font-size: 28rpx;
						font-family: PingFang SC-Medium, PingFang SC;
						font-weight: 500;
						color: #000000;
						margin-bottom: 10rpx;
					}
					.jia{
						color: #1BDDD0;
						font-size: 48rpx;
						font-family: PingFang SC-Bold, PingFang SC;
						font-weight: bold;
						text{
							font-size: 28rpx;
						}
					}
				}
				.cioneMo{
					width: 42%;
					padding:24rpx;
					background:rgba(27, 221, 208, 0.05);
					border-radius: 24rpx;
					margin-bottom: 20rpx;
					border: 1px solid #1BDDD0;
					.ci{
						font-size: 28rpx;
						font-family: PingFang SC-Medium, PingFang SC;
						font-weight: 500;
						color: #000000;
						margin-bottom: 10rpx;
					}
					.jia{
						color: #1BDDD0;
						font-size: 48rpx;
						font-family: PingFang SC-Bold, PingFang SC;
						font-weight: bold;
						text{
							font-size: 28rpx;
						}
					}
				}
			}
			.butLi{
				width: calc(100% - 64rpx);
				margin: 20rpx auto;
				background: #1BDDD0;
				font-size:32rpx;
				font-family: PingFang SC-Bold, PingFang SC;
				font-weight: bold;
				color: #FFFFFF;
				line-height: 92rpx;
				text-align: center;
				border-radius: 54rpx;
			}
		}
	}
</style>
